<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Release</title>
</head>

<body>
    <div>
        <h1>添加任务</h1>
        <div id="app">
            <div v-for="(item,index) in releaseButton">
                <input type="text" id="task" v-model="tasks[index]"></td>
                <input type="button" v-bind:value="releaseButton[index]" @click="releaseTask(index)">
                <input type="button" v-bind:value="removeButton[index]" @click="removeTask(index)">
            </div>
            <br>
            <input type="button" value="Commit" @click="commit()" v-show='isButton'>
        </div>
    </div>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                releaseButton : ['+'],
                removeButton: ['-'],
                tasks: [''],
                isButton: true
            },
            methods: {
                releaseTask:function(index) {
                    this.tasks.splice(index+1, 0, '');
                    this.releaseButton.push('+');
                    this.removeButton.push('-');
                    },
                removeTask: function   (index) {
                    if (this.releaseButton.length > 1 && this.removeButton.length > 1) {
                        this.tasks.splice(index, 1);
                        this.releaseButton.splice(index, 1);
                        this.removeButton.splice(index, 1);
                    } else {
                        alert('大哥，你还布置任务呢!');
                    }
                },
                commit: function () {
                    this.isButton = false
                    var datas = [];
                    var task;
                    this.tasks.forEach(task => {
                        if (task.trim() != '') {
                            datas.push(task);
                        }
                    });
                    console.log(datas);
                    var time = new Date();
                    var day = ("0" + time.getDate()).slice(-2);
                    var month = ("0" + (time.getMonth() + 1)).slice(-2);
                    var today = time.getFullYear() + "-" + (month) + "-" + (day);
                    console.log(today);
                    data = {task: JSON.stringify(datas), time: today};
                    $.post({
                        url: '/release', data: data, success: (data) => {
                            if (data == "success") {
                                window.location.href = '/'
                            } else {
                                alert('Fail To Commit!!!')
                                this.isButton = true
                            }
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>
